<template>
  <div class="card">
    <div v-if="!pass" style="text-align: center">
      <a-alert
          message="请重新登录"
          description="用户名、密码或验证码错误"
          type="error"
          show-icon
      />
    </div>

    <div style="margin:150px 0px;">
      <a-form :layout="formState.layout" :model="formState" @finish="submit" @finishFailed="handleFinishFailed">
        <div
            style="position: absolute;top: 25%;right: 25%;left: 0%;text-align:center; width:500px;height:400px;margin:0px 550px;background: #f8f8ee;border-radius:5%;box-shadow:10px 10px 5px #F5F5F4FF">
          <h1 style="margin:30px 0 40px -40px;text-align:center;font: 25px 宋体;font-weight: bolder">远程问诊系统</h1>
          <a-form-item label="用户名" style="padding-left: 20px;font: 25px 宋体">
            <a-input type="text" v-model:value="formState.username" placeholder="input your Username"
                     style="width: 350px;height: 40px;border-radius: 6px;float: left">
              <template #prefix>
                <UserOutlined style="color: rgba(0, 0, 0, 0.25)"/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="密&nbsp;码" style="padding-left: 20px;font: 25px 宋体">
            <a-input type="password" v-model:value="formState.password" placeholder="input your password"
                     style="width: 350px;height: 40px;border-radius: 6px;float: left">
              <template #prefix>
                <LockOutlined style="color: rgba(0, 0, 0, 0.25)"/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="验证码" style="padding-left: 20px;font: 25px 宋体">
            <a-input v-model:value="formState.code" placeholder="input your verifyCode"
                     style="width: 250px;height: 40px;border-radius: 6px;float: left">
            </a-input>
            <img :src="verifyCodeUrl" @click="changeCode"
                 style="width:60px;height: 40px;margin-left: 30px;float: left;border-radius: 6px"/>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit"
                      style="position: absolute;width:150px;height:40px;left:30%; font-size:20px;border-radius:6%;box-shadow:5px 5px 5px #74B2DAFF;text-align: center">
              login
            </a-button>
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div id="outside" style="width:30% ;">

      <div class="cubic">
        <div class="front"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="behind"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="left"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="right"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="top"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="bottom"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
      </div>
    </div>


    <div id="outside2" style="width:30% ;">

      <div class="cubic">
        <div class="front"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="behind"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="left"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="right"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="top"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
        <div class="bottom"><img src="../assets/login-background.jpg" style="width: 200px;height: 200px;"/></div>
      </div>
    </div>

  </div>
</template>


<script>
//test 注释123
import {UserOutlined, LockOutlined} from '@ant-design/icons-vue';
import {defineComponent, reactive, ref} from 'vue';
import {useRouter} from 'vue-router'
import {reqLogin, reqGetDoctorById} from '../api/index'

export default defineComponent({
  setup() {
    const router = useRouter()
    let verifyCodeUrl = ref( "/api/verifyCode/" + Date.now())
    const formState = reactive({
      username: '',
      password: '',
      code: ''
    });

    const pass = ref(true);

    const changeCode = () => {
      verifyCodeUrl.value =  "/api/verifyCode/" + Date.now()
    }

    async function submit() {
      let result = await reqLogin(formState)
      console.log(result['data'])
      if (result.code === 200) {
        sessionStorage.setItem('token', result['data'].token)
        sessionStorage.setItem('userId', result['data'].userId)
        console.log(result['data'].userId)
        let result1 = await reqGetDoctorById(result['data'].userId)
        sessionStorage.setItem('roleId', result1['data'].roleId)
        sessionStorage.setItem('name', result1['data'].name)
        router.push('/console/patient')
      } else {
        pass.value = false
        formState.username = ''
        formState.password = ''
        formState.code = ''
        changeCode()
      }
    }

    const handleFinishFailed = errors => {
      console.log(errors);
    };

    return {
      formState,
      // formItemLayout,
      verifyCodeUrl,
      changeCode,
      submit,
      router,
      handleFinishFailed,
      pass
    };
  },

  components: {
    UserOutlined,
    LockOutlined,
  },

});
</script>

<style>

.card {


  background: url("../assets/login-background.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;

}

body {
  margin: 0;
}

#outside {
  perspective: 800px;
  perspective-origin: 50% 50%;
}

#outside .cubic {
  position: relative;
  transform-style: preserve-3d;
  width: 206px;
  height: 206px;
  margin: 50px 150px;
  animation: myfirst 1800s linear

}

#outside .cubic:hover {
  animation-play-state: running;
}

#outside .cubic div {
  position: absolute;
  opacity: 0.7;
  width: 200px;
  height: 200px;
  background-color: blanchedalmond;
  border: 1px solid black;
}

.front {
  transform: translateZ(100px);
}

.behind {
  transform: rotateY(180deg) translateZ(100px);
}

.left {
  transform: rotateY(90deg) translateZ(100px);
}

.right {
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes myfirst {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(36000deg);
  }
}


body {
  margin: 0;
}

#outside2 {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

#outside2 .cubic {
  position: relative;
  transform-style: preserve-3d;
  width: 206px;
  height: 206px;
  margin: 50px 1200px;
  animation: myfirst 1800s linear

}

#outside2 .cubic:hover {
  animation-play-state: running;
}

#outside2 .cubic div {
  position: absolute;
  opacity: 0.7;
  width: 200px;
  height: 200px;
  background-color: blanchedalmond;
  border: 1px solid black;
}

@keyframes myfirst {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(36000deg);
  }
}


</style>

